<template>
    <el-dialog :visible="visible" width="360px" :before-close="close">
        <div class="content">
            <img src="@/static/image/cwhyts2.png"/>
            <div class="goVip">
                <div class="top">可关注数量已满</div>
                <div class="bottom">成为VIP会员畅享更多权益</div>
            </div>
            <div class="footer flex space-around">
                <div class="fun-btn cancel" @click="close">再看看</div>
                <div class="fun-btn primary" @click="toVip">升级VIP</div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            visible: false
        }
    },
    methods: {
        open() {
            this.visible = true
        },
        close() {
            this.visible = false
        },
        toVip() {
            this.$emit('toVip')
        }
    }
}
</script>
<style lang="less" scoped>
.content{
    width: 100%;
    img{
        width: 60%;
        margin: 0 auto;
    }
    .goVip{
        width: 100%;
        font-size: 14px;
        .top{
            width: 100%;
            text-align: center;
            color: #333;
        }
        .bottom{
            width: 100%;
            text-align: center;
            color: #1d78de;
        }
    }
    .footer{
        margin-top: 20px;
        .fun-btn{
            padding: 4px 30px;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            border-radius: 30px;
        }
        .cancel{
            background-color: #bfbfbf;
        }
        .primary{
            background-color: #1d78de;
        }
    }
}
</style>